<!-- eslint-disable vue/multi-word-component-names -->
<!-- 时间日期 -->
<template>
            <div>
                <div class="time_show_box" :style="'color:'+color+';font-size:'+size+'px'">{{ showTime }}</div>
                <div class="day_box" :style="'color:'+color+';font-size:'+(size / 2.5)+'px'">
                    {{ nyrAndxq }}
                </div>
            </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const props = defineProps({
    size: {
        type: String,
        default: '50'
    },
    color: {
        type: String,
        default: '#333'
    }
});
// 显示实际时间（本地）
const showTime = ref("")
// 年月日及星期
const nyrAndxq = ref('')

// 获取当前时间并格式化
const getNewTime = () => {
    // 创建当前时间时间戳
    const now = new Date();
    // 根据时间戳获取时钟时间
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    const seconds = now.getSeconds().toString().padStart(2, '0');
    showTime.value = hours+':'+minutes+':'+seconds
    // 获取日期星期
    const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
    nyrAndxq.value = now.toLocaleDateString('zh-CN', options);
}

onMounted(() => {
    setInterval(getNewTime, 500);
})
</script>
<style lang="scss" scoped>
.time_show_box {
    text-align: center;
}

.day_box {
    font-size: 17px;
    text-align: center;
}
</style>